/* 
 * 第二部分三张卡片模型
*/
import React, { Component, Fragment } from 'react'
import axios from "axios"
import CardDemo from './OnlyCard'
import art from '../../../../../images/art.jpg'
import security from '../../../../../images/security.jpg'
import software from '../../../../../images/software.jpg'

export default class SecondContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            secondData: []
        }

        axios.get('/static/secondContent.json').then(res => {
            let data = [];

            res.data.map((item, index) => {
                switch (index) {
                    case 0:
                        item.URL = security
                        break;
                    case 1:
                        item.URL = software
                        break;
                    case 2:
                        item.URL = art
                        break;
                    default:
                }

                data.push(item);
                return index;
            });

            this.setState({
                secondData: data
            })
        })
    }

    render() {
        return (
            <Fragment>
                <div style={{
                    color: '#ccc',
                    textAlign: 'center',
                    fontSize: 36,
                    position: 'relative',
                    top: (this.props.scrollIndex === 1 ? 0 : -50),
                    opacity: (this.props.scrollIndex === 1 ? 1 : 0),
                    transitionDuration: '1s',
                }}>OUR CASES</div>
                <div style={{
                    color: '#fff',
                    textAlign: 'center',
                    fontSize: 36,
                    marginBottom: 50,
                    position: 'relative',
                    top: (this.props.scrollIndex === 1 ? 0 : 50),
                    opacity: (this.props.scrollIndex === 1 ? 1 : 0),
                    transitionDuration: '1s',
                }}>我们的服务</div>
                <div style={{
                    display: 'flex',
                    width: 1200,
                    margin: '0 auto',
                    justifyContent: 'space-between'
                }}>
                    {
                        this.state.secondData.map((item, index) => {

                            return (
                                <div key={index} style={{
                                    opacity: (this.props.scrollIndex === 1 ? 1 : 0),
                                    transitionDuration: '1s',
                                    transitionDelay: `${(index * 1)}s`
                                }}>
                                    <CardDemo data={item} index={index} scrollIndex={this.props.scrollIndex} />
                                </div>
                            );
                        })
                    }
                </div>
            </Fragment>
        )
    }
}
